<html>

<head>
  <title>对象克隆.clone()和复制.copy()</title>
  <style>
    body {
      margin: 0;
    }

    canvas {
      display: block;
    }
  </style>
</head>

<body>
  <script src="./js/three.js"></script>
  <script src="./js/OrbitControls.js"></script>
  <script>
    // 1、创建场景
    var scene = new THREE.Scene();

    //创建一个球体几何对象
    // var geometry = new THREE.SphereGeometry(100, 25, 25);
    // ==============================================================================================================
    // 材质对象
    // var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    // 网格模型对象Mesh
    // var mesh = new THREE.Mesh(geometry, material);


    // scene.add(mesh);

    // Threejs大多数对象都有克隆.clone()和复制.copy()两个方法,点模型Points、线模型Line、网格网格模型Mesh一样具有这两个方法。
    // 复制方法.copy()
    // A.copy(B)表示B属性的值赋值给A对应属性。
    // var p1 = new THREE.Vector3(1.2, 2.6, 3.2);
    // var p2 = new THREE.Vector3(0.0, 0.0, 0.0);
    // p2.copy(p1)
    // p2向量的xyz变为p1的xyz值
    // console.log(p2);

    // 克隆方法.clone()
    // N = M.copy()表示返回一个和M相同的对象赋值给N。
    // var p1 = new THREE.Vector3(1.2, 2.6, 3.2);
    // var p2 = p1.clone();
    // p2对象和p1对象xyz属性相同
    // console.log(p2);

    // 网格模型复制和克隆
    // 网格模型复制克隆和三维向量基本逻辑是相同，但是注意三维向量Vector3的.x、.y、.z属性值是数字，
    // 也就是说是基本类型的数据，对于网格模型而言，网格模型对象的几何体属性mesh.geometry和材质属性mesh.material的属性值都是对象的索引值。
    var box = new THREE.BoxGeometry(10, 10, 10);//创建一个立方体几何对象
    var material = new THREE.MeshLambertMaterial({ color: 0x0000ff });//材质对象


    var mesh = new THREE.Mesh(box, material);//网格模型对象
    var mesh2 = mesh.clone();//克隆网格模型
    mesh.translateX(20);//网格模型mesh平移

    scene.add(mesh, mesh2);//网格模型添加到场景中

    // 缩放几何体box,你可以发现上面代码中的两个网格模型的大小都发生了变化，因为网格模型克隆的时候，mesh对象的几何体对象mesh.geometry属性值是box对象的索引值，返回的新对象mesh2几何体属性mesh.geometry的值同样是box对象的索引值。
    box.scale(1.5,1.5,1.5);//几何体缩放





    // 3、光源设置：
    //环境光    环境光颜色与网格模型的颜色进行RGB进行乘法运算
    var ambient = new THREE.AmbientLight('#444444');
    scene.add(ambient);

    //点光源  
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300);
    scene.add(point);


    // 4、添加相机
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.z = 5;
    //设置相机位置
    camera.position.set(200, 300, 200);
    //设置相机方向(指向的场景对象)
    camera.lookAt(scene.position);


    // 5、创建渲染器对象
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement);

    // 6、执行渲染操作
    var animate = function () {
      renderer.render(scene, camera);
      requestAnimationFrame(animate);
      mesh.rotation.x += 0.01;
      mesh.rotation.y += 0.01;
    };
    animate();
    var controls = new THREE.OrbitControls(camera);//创建控件对象
  </script>
</body>

</html>